<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/bootstrap/boostrap-hover-dropdown.js">
    </script>
    <link href="${pageContext.request.contextPath}/css/article.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/jQuery/ckeditor/ckeditor.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function checkForm() {
            var title = document.getElementById("title").value;
            var context = CKEDITOR.instances.context.getData();
            var typeId = document.getElementById("typeId").value;

            if (title == null || title == "") {
                document.getElementById("error").innerHTML = "标题不能为空！";
                return false;
            }
            if (context == null || context == "") {
                document.getElementById("error").innerHTML = "内容不能为空！";
                return false;
            }
            if (typeId == null || typeId == "") {
                document.getElementById("error").innerHTML = "请选择博客类别！";
                return false;
            }
            return true;
        }
    </script>
    <style>
        .data_list {
            border: 1px solid #E5E5E5;
            padding: 10px;
            background-color: #FDFDFD;
            margin-top: 15px;
        }

        .data_list .data_list_title {
            font-size: 15px;
            font-weight: bold;
            border-bottom: 1px solid #E5E5E5;
            padding-bottom: 10px;
            padding-top: 5px;
        }

        .data_list .data_list_title img {
            vertical-align: top;
        }

        .data_list .diary_datas {
            padding: 5px;
        }

        .data_list .diary_datas ul {
            list-style-type: none;
        }

        .data_list .diary_datas ul li {
            margin-top: 15px;
        }

        .data_list .datas {
            padding: 5px;
        }

        .data_list .datas ul {
            list-style-type: none;
        }

        .data_list .datas ul li {
            margin-top: 10px;
        }

        .data_list .user_image {
            text-align: center;
        }

        .data_list .user_image img {
            padding-top: 10px;
            width: 200px;;
            height: 250px;;
        }

        .data_list .nickName, .data_list .userSign {
            text-align: center;
        }

        .data_list .article_title {
            margin-top: 20px;
            text-align: center;
        }

        .data_list .diary_info {
            text-align: center;
        }

        .data_list .diary_content {
            margin-top: 20px;
        }

        .data_list .diary_action {
            margin-top: 20px;
        }

        .data_list .article_type {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .data_list .article_title {
            margin-top: 20px;
            text-align: center;
            margin-bottom: 20px;
        }

        .data_list .data_list_title .diaryType_add {
            float: right;
            margin-right: 20px;
        }

        .data_list .diaryType_form {
            margin-top: 20px;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            $.get("${pageContext.request.contextPath}/category", {"method": "categoryList"},
                function (data) {
                    $(data).each(function (index, obj) {
                        $("#typeId").append("<option value=" + obj.categoryId + ">" + obj.categoryName + "</option>")
                    })
                },
                "json");
        })
    </script>

</head>
<body>
<div class="data_list">
    <div class="data_list_title">
        <img src="${pageContext.request.contextPath}/img/article_add_icon.png"/>
        写博客
    </div>


    <form action="article?method=articleSave" method="post" onsubmit="return checkForm()">
        <div>
            <div class="article_title"><input type="text" id="title" name="title" value="${aticle.title}"
                                              class="input-xlarge"
                                              style="margin-top:5px;margin-bottom:20px;height:30px;width:200px;"
                                              placeholder="博客标题..."/></div>
            <div>
                <textarea class="ckeditor" id="context" name="context">${article.context}</textarea>
            </div>
            <div class="article_type">
                <select id="typeId" name="typeId" style="margin-top:5px;margin-bottom:0px;height:30px;">
                    <option value="">请选择博客类别...</option>
                </select>
            </div>
            <div>
                <input type="hidden" id="articleId" name="articleId" value="${article.articleId }"/>
                <input type="submit" class="btn btn-primary" style="color:blue" value="保存"/>
                <button class="btn btn-primary" type="button" style="color:blue" onclick="javascript:history.back() ">
                    返回
                </button>
                <font id="error" color="red"></font>
            </div>
        </div>
    </form>


</div>
</body>
</html>